<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1000px;
            height: 600px;
            margin: 100px auto;
        }

        .box .commodity {
            width: 750px;
            height: 600px;
            float: left;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }

        .box .commodity div {
            width: 160px;
            height: 300px;
            margin-bottom: 20px;
        }

        .box .commodity div img {
            width: 100%;
        }

        .box .commodity div p {
            padding-left: 10px;
        }

        .box .commodity div button {
            width: 100px;
            height: 20px;
            border-radius: 10px;
            text-align: center;
            background-color: red;
            border: none;
            cursor: pointer;
        }

        .box .cart {
            width: 250px;
            height: 600px;
            float: left;
        }

        .box .cart li {
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            list-style: none;
            margin-bottom: 5px;
            background-color: blue;
        }

        .box .cart li img {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 商品展示 -->
        <div class="commodity">

        </div>
        <!-- 购物车 -->
        <div class="cart">
            <h2></h2>
        </div>
    </div>
</body>

</html>
<script>
    // =====================封装面向对象
    class Shopping {
        // 
        constructor(arr, box) {
            this.dom = document.querySelector(box);
            this.data = arr;
            this.index = 0;
            this.id = null;
            this.idarr = [];
            this.obj = {};
            this.render();
            this.btns = this.dom.querySelectorAll('.commodity button')
            this.h2Ele = document.querySelector('.box .cart h2')
            this.btnEle();
        }
        // =========渲染商品栏
        render() {
            let str = ``
            str = this.data.map((item) => {
                return `<div>
                <img src="${item.img}">
                <p>${item.name}</p>
                <p>${item.Price}</p>
                <button>加入购物车</button>
                </div>`
            }).join('')
            this.dom.querySelector(".commodity").innerHTML = str
        }

        // ==========创建加入购物车点击事件

        btnEle() {
            this.btns.forEach((item, index) => {
                item.onclick = (() => {
                    this.idarr.indexOf(this.data[index]) != -1 ? this.data[index].id++ : this.idarr.push(this.data[index])
                    let str1 = this.idarr.map((item, index) => {
                        return `<li>
                                  <input type="checkbox">
                                  <img src="${item.img}" alt="">
                                  <span>${item.Price}</span>
                                  <span>${item.id}</span>
                                  <span>删除收藏</span>
                                  </li>`
                    }).join('')
                    this.h2Ele.innerHTML = `数量：${this.data[index].id += this.data[index].id}`
                    this.dom.querySelector('.cart').innerHTML = str1
                    /* this.obj = { ...this.idarr }
                     for (let key in this.obj) {
                         console.log(this.obj[key]);
                         // this.id = this.obj[key].id
                         // this.Sterun()
                         // for (var key in this.obj[key]) {
                             Object.defineProperty(this.obj[key], 'id', {
                                 set: (id) => {
                                     console.log(1111);
                                 let str1 = ``
                                 str1 = this.data.map((item) => {
                                           return `<li>
                                                   <input type="checkbox">
                                                   <img src="${item.img}" alt="">
                                                   <span>${item.Price * item.id}</span>
                                                   <span>${item.id}</span>
                                                   <span>删除收藏</span>
                                                   </li>`
                                 }).join('')
                                 this.dom.querySelector('.cart').innerHTML = str1
                             },
 
 
                                 // this.dom.querySelector('.cart').innerHTML = (`<li>
                                 //                   <input type="checkbox">
                                 //                   <img src="${this.obj[key].img}" alt="">
                                 //                   <span>${this.obj[key].Price * this.obj[key].id}</span>
                                 //                   <span>${this.obj[key].id}</span>
                                 //                   <span>删除收藏</span>
                                 //                   </li>`).join('')
                             get: () => {
                                 // this.dom.querySelector('.cart').innerHTML = `<li>
                                 //           <input type="checkbox">
                                 //           <img src="${item.img}" alt="">
                                 //           <span>${item.Price * item.id}</span>
                                 //           <span>${item.id}</span>
                                 //           <span>删除收藏</span>
                                 //           </li>`
                             }
                         })
 
 
                     }*/
                })
            })
        }
        Sterun() {
        }

    }

    // ====================传数据
    let arr = [
        { name: '高级办公椅', Price: 1000, img: "images/pic1.jpg", id: 1 },
        { name: '高级按摩椅', Price: 100, img: "images/pic2.jpg", id: 1 },
        { name: '高级电动按摩椅', Price: 10, img: "images/pic3.jpg", id: 1 },
        { name: '电动按摩椅', Price: 999, img: "images/pic4.jpg", id: 1 },
        { name: '老板椅', Price: 150, img: "images/pic5.jpg", id: 1 },
        { name: '办公桌', Price: 135, img: "images/pic6.jpg", id: 1 },
        { name: '可降办公椅', Price: 1345, img: "images/pic7.jpg", id: 1 },
        { name: '可降办公桌', Price: 1205, img: "images/pic8.jpg", id: 1 }
    ]
    const box = '.box'
    let Shpp = new Shopping(arr, box)
</script>